<template>
  <div>
    <el-date-picker v-model="date" type="month" placeholder="选择月份"></el-date-picker>
    <el-button @click="selectEmployee">选择员工</el-button>
    <el-button @click="clear">清空</el-button>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="events" label="事件">
        <template #default="scope">
          <div v-for="event in scope.row.events" :key="event.id">
            <el-tag>{{ event.title }}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-calendar>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
        <!-- 添加中秋节放假通知 -->
        <span v-if="isMidAutumnFestival(data.day)">中秋节放假通知</span>
      </p>
    </template>
  </el-calendar>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const date = ref(new Date());
    const tableData = ref([]);
    const midAutumnFestivalDates = ['2024-12-10']; // 假设中秋节是2023年9月10日

    const selectEmployee = () => {
      // 选择员工逻辑
    };

    const clear = () => {
      // 清空逻辑
    };

    const isMidAutumnFestival = (day) => {
      return midAutumnFestivalDates.includes(day);
    };

    return {
      date,
      tableData,
      midAutumnFestivalDates,
      selectEmployee,
      clear,
      isMidAutumnFestival
    };
  }
};
</script>

<style scoped>
.is-selected {
  color: red;
}
</style>
